<template>
	<mainHeader :title="`${props.time} 预算`" :haveBack="true" goto="back"></mainHeader>
	<scroll-view scroll-y class="header_scroll">
		<indexBudgetVue :time="props.time" :ringClick="true" />
		<view class="budget_list" v-if="showBudget.length>0">
			<view class="budget_list_one index_list_box base_box" v-for="item in showBudget"
				 @longpress="deleteBudget(item)">
				<view class="budget_list_one_header base_box_round theDetail_class oneLine">
					{{item.tag}}
				</view>
				<view class="budget_list_one_mid">
					<view class="budget_list_one_mid_top oneLine">
						<text class="smallTitle">预算:</text>{{item.sum}}{{moneySymbol}}
					</view>
					<view class="budget_list_one_mid_bottom oneLine" @click="gotoClassDetail(item)">
						<text class="smallTitle">支出:</text>{{item.useSum}} <text
							class="smallTitle">(共有:{{item.list.length}}条)</text>
					</view>
				</view>
				<view class="budget_list_one_end">
					<RingShowVue :all="parseFloat(item.sum)" :have="parseFloat(-item.useSum)" :canClick="true" />
				</view>
			</view>
		</view>
		<noneTextVue title="本月暂无预算" v-else/>
	</scroll-view>
	<addBudgetPopupVue :time="props.time">
		<uni-fab class="budget_fab" horizontal="right"></uni-fab>
	</addBudgetPopupVue>
</template>

<script setup>
	import noneTextVue from "@/components/base/noneText.vue";
	import RingShowVue from "@/components/RingShow.vue";
	import addBudgetPopupVue from "./addBudgetPopup.vue";
	import indexBudgetVue from "@/components/index_budget.vue";
	import mainHeaderVue from '@/components/mainHeader.vue';
	import {
		computed,
		defineProps
	} from "vue"
	import {
		takeClassList,
		myShowToast
	} from "@/uitls/tool.js"
	import store from '@/store/index.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const moneySymbol = computed(() => store.state.setting.MoneySymbol)
	const props = defineProps({ // 页面传值
		time: String,
	})
	const theMonthYusuana = computed(() => store.state.mainData.yusuanData[props.time])
	const theMonthAllData = computed(() => takeClassList(store.state.mainData.allData[props.time]||[], (item) => item?.showOne))
	const showBudget = computed(() => {
		if (theMonthYusuana.value != void 0 && theMonthYusuana.value.length >= 0) {
			let outer = []
			for (let oneBudget of theMonthYusuana.value) {
				if (oneBudget.sum != 0) {
					let one={...oneBudget}
					one.list = theMonthAllData.value[oneBudget.tag] || []
					one.useSum=0
					for (let oneOrder of one.list) {
						if(oneOrder.showClass==0)one.useSum -= parseFloat(oneOrder.addValue)
						else one.useSum += parseFloat(oneOrder.addValue)
					}
					outer.push(one)
				}
			}
			return outer
		}
		return []
	})
	const gotoClassDetail = (item) => { //跳转　标签月详情
		if(item.list.length>0){
			uni.navigateTo({
				url: `/subPages/classDetail/classDetail?class=${item.tag}&theMonth=${item.time}`,
				animationType: 'zoom-fade-out',
			})
		}else{
			myShowToast("没有记录")
		}
		
	}
	const deleteBudget = (item) => {
		uni.showModal({
			title: '提示',
			content: `确定要删除关于 ${item.tag} 的预算吗`,
			success: function(res) {
				if (res.confirm) {
					store.commit("mainData/deleteYusuanData", item)
					myShowToast(`${item.tag}删除成功`)
				} else if (res.cancel) {}
			}
		});
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.budget_list {
		&_one {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&_header {
				flex-shrink: 0;
				font-size: $bigFontsize;
			}

			&_mid {
				flex: 1;
				padding: 0 calc($baseFontsize *0.5);

				&_top {}

				&_bottom {
					font-size: $midFontsize;
					color: $baseBlack_mid;
				}
			}

			&_end {
				width: calc(max(20%, $baseFontsize * 5));
			}
		}
	}

	.budget_fab {
		::v-deep .uni-fab__circle--rightBottom {
			background: $baseColor !important;
		}
	}
</style>